<template>
    <view class="message-content">
        <!-- 系统信息 -->
        <view class="system-message" v-for="item in messageList" :key="item.id">
            <!-- 头像 -->
            <view class="message-image">
                <han-icon :name="item.iconImage" class="image" size="88" />
            </view>

            <!-- 信息 -->
            <view class="message-info">
                <view class="message-title">
                    <view class="title">{{ item.title }}</view>
                    <view class="time">时间</view>
                </view>
                <view class="message-text">暂无</view>
            </view>

            <!-- 消息未读 -->
            <view class="unread-dot" v-if="true"></view>
        </view>

        <!-- 用户消息 -->
        <view
            class="user-message"
            v-for="item in userMessageList"
            :key="item.id"
            @click="navigatorToChattingPage(item.id)"
        >
            <view class="message-image">
                <image class="image" :src="item.avatar"></image>
            </view>

            <view class="message-info">
                <view class="message-title">
                    <view class="title">{{ item.name }}</view>
                    <view class="time">{{ item.time }}</view>
                </view>
                <view class="message-text">{{ item.lastMessage }}</view>
            </view>

            <view class="unread-dot" v-if="item.unread"></view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { SYSTEM_MESSAGE } from '@/util/config/message.config';

const messageList = ref(SYSTEM_MESSAGE);

// 用户消息数据
const userMessageList = ref([
    {
        id: 101,
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatars/user_8/1747016817466.jpg',
        name: '汉服设计师',
        lastMessage: '您设计的唐代襦裙样式太棒了！能分享设计稿吗？',
        time: '09:45',
        unread: true
    },
    {
        id: 102,
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatars/user_8/1747016817466.jpg',
        name: '传统文化研究会',
        lastMessage: '周六的汉服文化沙龙，期待您的参与',
        time: '昨天',
        unread: false
    },
    {
        id: 103,
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatars/user_8/1747016817466.jpg',
        name: '汉服摄影-小唐',
        lastMessage: '您预约的汉服摄影时间已确认，请查收详情',
        time: '06-12',
        unread: false
    },
    {
        id: 104,
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatars/user_8/1747016817466.jpg',
        name: '汉服定制工坊',
        lastMessage: '您定制的明制道袍已完成，请确认取货时间',
        time: '06-11',
        unread: true
    }
]);

// 点击消息处理
const handleMessageClick = (item) => {
    console.log('点击消息:', item);
    // 标记为已读
    if (item.unread) {
        item.unread = false;
    }
    // 跳转到聊天页面
    uni.navigateTo({
        url: '/pages/message/detail?id=' + item.id
    });
};

// 跳转到聊天页面
const navigatorToChattingPage = (id) => {
    uni.navigateTo({
        url: '/pages/message/subpages/chatting_page/chattingPage'
    });
};
</script>

<style lang="scss">
.message-content {
    width: 100%;
    padding: 20rpx 20rpx 120rpx !important;

    .system-message,
    .user-message {
        display: flex;
        position: relative;
        padding-bottom: 20rpx;

        .message-image {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            overflow: hidden;

            .image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .icon {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .message-info {
            flex: 1;
            min-width: 0;
            width: 100%;
            margin-left: 20rpx;

            .message-title {
                display: flex;
                justify-content: space-between;

                .title {
                    font-size: $han-font-size-base;
                    font-weight: bold;
                }

                .time {
                    font-size: $han-font-size-sm;
                    color: $han-global-secondary-font-color;
                }
            }

            .message-text {
                width: 90%;
                margin-top: 6rpx;
                font-size: $han-font-size-sm;
                color: $han-global-secondary-font-color;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .unread-dot {
            position: absolute;
            right: 20rpx;
            top: 60rpx;
            width: 14rpx;
            height: 14rpx;
            border-radius: 50%;
            background-color: $han-primary-color;
        }
    }
}
</style>
